<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>管理座位</h3>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item
          label="桌号"
          prop="tableId"
        >
          <el-input v-model="form.tableId" />
        </el-form-item>
        <el-form-item
          label="是否可用"
          prop="isAvailable"
        >
          <el-select v-model="form.isAvailable" placeholder="请选择">
            <el-option label="可用" value="1" />
            <el-option label="不可用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="可入座最大人数"
          prop="seatNumber"
        >
          <el-input-number v-model="form.seatNumber" :min="1" :max="10" label="描述文字" @change="handleChange" />
        </el-form-item>
        <el-form-item
          label="状态"
          prop="state"
        >
          <el-select v-model="form.state" placeholder="请选择">
            <el-option label="正在使用" value="1" />
            <el-option label="空闲" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item
          label="商家ID"
          prop="userId"
        >
          <el-input v-model="form.userId" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style>
  .el-card {
    margin-bottom: 10px;
  }
</style>
<script>
import { addTables } from '@/api/table'
import { createStorage, uploadPath } from '@/api/storage'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'
import { thumbnail, toPreview } from '@/utils/index'
import qs from 'qs'

export default {
  data() {
    return {
      form: {
        seatNumber: 1,
        isAvailable: '',
        state: '',
        tableId: '',
        userId: ''
      },
      rules: {
        seatNumber: [
          { required: true, message: '请输入最大容量', trigger: 'change' }
        ],
        isAvailable: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        state: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        tableId: [
          { required: true, message: '请输入桌号ID', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '请输入商家ID', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 需要对form表单的校验
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form._tableId) {
            updateTables(this.form).then(res => {
              this.$message.success('编辑成功')
            }).catch(res => {
              this.$message.error('编辑失败了！')
            })
          } else {
            const finish = {
              isAvailable: this.form.isAvailable,
              seatNumber: this.form.seatNumber,
              state: this.form.state,
              tableId: this.form.tableId,
              userId: this.form.userId
            }
            // console.log(finish, 'this.fishthis.fishthis.fish')
      
            addTables(finish).then(res => {
              this.$message.success('新增成功')
            }).catch(res => {
              console.log("wwwwwwwwwwww");
              this.$message.error('新增失败了！')
            })
          }
        } else {
          this.$message.error('失败了！')
          return false
        }
      })
    },
    //   重置
    resetForm(form) {
      this.$refs[form].resetFields()
    },
    //   handlechange
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>
